//
// Animations
// --------------------------------------------------


// Transitions

.fade {
  .transition-fast();
  opacity: 0;

  &.in {opacity: 1;}
}

.scale {
  .transition-fast();
  transform: scale(.8);

  &.in {transform: scale(1);}
}

.collapse {
  display: none;

  &.in {display: block;}
}

.collapsing {
  position: relative;
  overflow: hidden;
  transition: ease height @animation-speed-fast;
}


// enter-from-* and scale-from-*

[class^="scale-from-"],
[class*=" scale-from-"],
[class^="enter-from-"],
[class*=" enter-from-"] {
  .transition-fast();
  &.in {
    opacity: 1;
    transform: scale(1) translate(0%, 0%);
  }
}

.scale-from-top    {opacity: 0; transform: scale(.8) translate(0, -30%);}
.scale-from-bottom {opacity: 0; transform: scale(.8) translate(0, 30%);}
.scale-from-left   {opacity: 0; transform: scale(.8) translate(-30%, 0);}
.scale-from-right  {opacity: 0; transform: scale(.8) translate(30%, 0);}
.scale-from-center {opacity: 0; transform: scale(.8);}
.enter-from-top    {transform: translate(0, -105%);}
.enter-from-bottom {transform: translate(0, 105%);}
.enter-from-left   {transform: translate(-105%, 0);}
.enter-from-right  {transform: translate(105%, 0);}
.enter-from-center {opacity: 0; transform: scale(.8) translate(0, 50%);}


@keyframes animate-flash
{
    0% {
        opacity: 0.05;
    }
    100% {
        opacity: 0.5;
    }
}

.animate-flash {
  animation-name: animate-flash;
  animation-duration: 0.6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out
}

@keyframes highlight-focus
{
    0% {
        background: #fff;
    }
    50% {
        background: @color-highlight;
    }
}

.highlight-focus {
  animation-name: highlight-focus;
  animation-duration: 1s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-timing-function: ease-in-out
}


// Spin animation

@keyframes spin {
  0%   {transform: rotate(0deg);}
  100% {transform: rotate(359deg);}
}

.spin      {animation: spin 2s infinite linear;}
.spin-fast {animation: spin 1s infinite linear;}

.ants-border {
  border: 1px solid transparent;
  border-image: url("") 1 repeat repeat;
}
